import React, { useState } from 'react'
import { Link, Outlet } from 'react-router-dom'

export default function Message() {
    const [message] = useState({
        arr: [
            { id: 1, name: "yueyue1" },
            { id: 2, name: "yueyue2" },
            { id: 3, name: "yueyue3" },
        ],
    })
    return (
        <div><h3>Message</h3>
            <ul>
                {message.arr.map(item => {
                    return <li key={item.id}>
                        {/* 方案一 传递params参数，使用/分割，在定义规则使用/:id进行接受，在目标组件通过useParams这个hook进行解析数据 */}
                        {/* <Link to={`detail/${item.id}/${item.name}`}>{item.name}</Link> */}
                        {/* 方案二 传递search参数，使用?和&进行传递，无需使用占位符匹配路由，在目标组件当中可以通过useLocation或者useSearchParams接收参数解析 */}
                        {/* <Link to={`detail?id=${item.id}&name=${item.name}`}>{item.name}</Link> */}
                        {/* 方案三：传递state参数，直接在目标组件通过useLocation获取state进行解构即可 */}
                        <Link to={'detail'} state={{ id: item.id, name: item.name }}>{item.name}</Link>
                    </li>
                })}
            </ul>
            <hr />
            <Outlet />
        </div >
    )
}
